<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IGS要素图层 - 4326</title>
    <!-- 引入地图引擎库 -->
    <script
      src="http://webclient.smaryun.com/static/libs/include-lib-local-upgrade.js"
    ></script>
    <!--示例中面板、按钮等，第三方layui的js库与css样式-->
    <script src="http://webclient.smaryun.com/static/libs/cdn/layui/layui.js"></script>
    <link rel="stylesheet" href="http://webclient.smaryun.com/static/libs/cdn/layui/css/layui.css" />
    <!--示例公共样式-->
    <link
      rel="stylesheet"
      href="http://webclient.smaryun.com/static/libs/css/style.css"
    />
    <script type="text/javascript">
      //使用严格模式
      'use strict'
      // 定义二维视图的主要类

      let map, view, layer, layerOpacity = 1
      const {
        IGSTileLayer,
        IGSFeatureLayer
      } = zondy.layer
      const { Map, Color, ElevationInfo } = zondy
      const { RandomRenderer } = zondy.renderer
      const { SimpleMarkerSymbol, SimpleLineSymbol } = zondy.symbol

      // 初始化地图
      function init() {
        // 初始化地图视图
        initView()
        // 初始化示例UI
        initUI()
        // 添加瓦片图层
        addIGSTileLayer()
        // 添加要素图层
        addLayer()
      }

      // 初始二维地图
      function initView() {
        // 初始化图层管理容器
        map = new Map()
        // 初始化地图视图对象
        view = createView('mapgis-viewer', map)
        // 获取地图引擎类型
        const engineType = localStorage.getItem('engine-type', 'cesium')
        // 针对三维进行特殊处理
        if (engineType === 'cesium'){
          // 获取三维场景视图对象
          const viewer = view.getInnerView()
          // 判断是否支持图像渲染像素化处理
          if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){
            // 使得该值和浏览器保持一致，文字或者图形的渲染结果会更加平滑
            viewer.resolutionScale = window.devicePixelRatio
          }
          // 开启抗锯齿，文字或者图形的渲染结果会更加平滑
          viewer.scene.fxaa = true
          viewer.scene.postProcessStages.fxaa.enabled = true
        }
      }

      // 添加瓦片图层
      function addIGSTileLayer() {
        // 创建瓦片图层
        const igsTileLayer = new IGSTileLayer({
          // 服务基地址
          url: 'http://webclient.smaryun.com:8089/igs/rest/services/Tile/湖北省_4326_normal_3-10/TileServer'
        })
        // 添加图层
        map.add(igsTileLayer)
        // 图层添加完毕后，跳转到图层范围内
        igsTileLayer.on('layerview-created', (result) => {
          view.flyTo({
            extent: result.layer.extent
          })
        })
      }

      // 添加WFS图层
      function addLayer() {
        // 创建wfs图层
        layer = new IGSFeatureLayer({
          // 服务基地址
          //url: 'http://webclient.smaryun.com:8089/igs/rest/services/Map/湖北省4326/FeatureServer',
		  url: 'http://gis25.jlu3s.com:6163/igs/rest/services/maptest/MapServer',
          // 图层透明度
          opacity: layerOpacity,
          // 指定显示一个子图层，仅支持单图层的要素查询，不支持多图层和子图层的要素查询
          sublayerId: '0',
          // 设置渲染样式-随机专题图
          renderer: new RandomRenderer(),
          // 由于没有设置坐标点高度，因此将高度模式设置为贴地模式，避免被地形压盖
          elevationInfo: new ElevationInfo({
            mode: 'OnTheGround'
          })
        })
        // 添加wfs图层
        map.add(layer)
      }

      // 删除图层
      function deleteLayer() {
        map.remove(layer)
      }

      // 显隐图层
      function toggleLayer() {
        layer.visible = !layer.visible
      }

      //初始化示例UI操作
      function initUI() {
        layui.use(function () {
          layui.slider.render({
            elem: "#moveStep",
            value: 100,
            min: 0,
            max: 100,
            step: 1,
            theme: 'rgb(21, 134, 238)',
            //自定义提示文本
            setTips: function (value) {
              layerOpacity = value / 100
              return value + '%';
            },
            change: function (value) {
              layer.opacity = layerOpacity
            }
          });
        })
      }
    </script>
  </head>

  <body onload="init();">
    <!--  视图容器div  -->
    <div id="mapgis-viewer" style="position: absolute; width: 100%; height: 100%"></div>
    <!--  示例UI  -->
        <div class="layui-panel layui-panel-right feature-layer-panel">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;">图层透明度</label>
                <div class="layui-input-block sample-slider" style="width: 160px;">
                    <div id="moveStep"></div>
                </div>
            </div>
            <div class="line"></div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" onclick="addLayer()">添加图层</button>
                <button type="button" class="layui-btn" onclick="deleteLayer()" style="margin-left: 6px">删除图层</button>
                <button type="button" class="layui-btn" onclick="toggleLayer()" style="margin-left: 6px">显隐图层</button>
            </div>
        </form>
    </div>
  </body>
</html>